<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <!--顶部-->
        <el-row  style="min-height: 40px;display: flex;">
          <el-col  style="margin-bottom: 5px;" align="left">
            <el-input v-model="key" clearable style="width: 300px;" placeholder="输入关键词查询" class="kz_search">
              <el-button slot="append" type="primary"  @click="getStart()">搜索</el-button>
            </el-input>
          </el-col>
          <el-col  style="margin-bottom: 5px;" align="right">
            <el-button type="primary" @click="addShow()" style="">添加</el-button>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table
          border
          @selection-change="handleSelectionChange"
          align="left"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <!--<el-table-column-->
            <!--prop="id"-->
            <!--label="id">-->
          <!--</el-table-column>-->
          <el-table-column
            prop="role_name"
            label="名称">
          </el-table-column>
          <el-table-column
            label="权限">
            <template slot-scope="scope">
               {{roleTo(scope.row.rules)}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="120">
            <template slot-scope="scope">
              <el-button @click="changeMes(scope.row.id,0)" style="color: red"  size="small" type="text">删除</el-button>
              <el-button @click="editShow(scope.row)" size="small" type="text">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-col :span="24" style="margin-top: 15px">
          <el-pagination
            style="text-align: right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataTotal">
          </el-pagination>
        </el-col>
      </el-row>
    </el-row>

    <!--新增-->
    <el-dialog title="新增" :visible.sync="addVisible" width="360px" :modal-append-to-body="false">
      <el-form :model="addData" :rules="addRules" ref="addData" style="text-align: left">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="role_name">
          <el-input clearable v-model="addData.role_name" auto-complete="off" placeholder="请输入"
                    required></el-input>
        </el-form-item>
        <el-form-item label="权限选择" :label-width="formLabelWidth">
          <el-select v-model="addData.rules" placeholder="权限选择" multiple >
            <el-option :label="item.name" :value="item.key" v-for="(item,index) in roleData" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd('addData')">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑-->
    <el-dialog title="编辑" :visible.sync="editVisible" width="360px" :modal-append-to-body="false">
      <el-form :model="editData" :rules="editRules" ref="editData" style="text-align: left">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="role_name">
          <el-input clearable v-model="editData.role_name" auto-complete="off" placeholder="请输入"
                    required></el-input>
        </el-form-item>
        <el-form-item label="权限选择" :label-width="formLabelWidth">
          <el-select v-model="editData.rules" placeholder="权限选择" multiple >
            <el-option :label="item.name" :value="item.key" v-for="(item,index) in roleData" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit('editData')">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>

  export default {
    name: "Power",
    activated() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      this.getStart()
    },
    data() {
      return {
        contentVisible:false,
        contentValue:'',
        serchValue:'',
        addSelectValue:0,
        tableData: [],
        pageSize: 10,
        page: 1,
        currentPage: 1,
        key:'',
        selectkey: '',
        dataTotal: 0,
        multipleSelection: [],
        formLabelWidth: '80px',
        addVisible: false,
        addData: {
          role_name:'',
          rules:'',
        },
        addRules: {
          role_name: {required: true, message: '必填', trigger: 'blur'},
          roles: {required: true, message: '必填', trigger: 'blur'},
        },
        editVisible: false,
        editData: {
          role_name:'',
          rules:'',
        },
        editRules: {
          role_name: {required: true, message: '必填', trigger: 'blur'},
          rules: {required: true, message: '必填', trigger: 'blur'},
        },
      }
    },
    computed: {
      roleData() {
        return this.$store.state.login.roleData
      },
    },
    methods: {
      // 获取数据
      getStart() {
        let thi = this
        const por = {
          page: thi.page,
          pageSize: thi.pageSize,
          key: thi.key
        }
        thi.mySelectAll('roleList', por).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      //权限转换
      roleTo(data){
        let s=[]
        data.split(',').forEach(value => {
          for(let i=0;i<this.roleData.length;i++){
            if(value==this.roleData[i].key){
              s.push(this.roleData[i].name)
              return
            }
          }
        })
        return s.join(',')
      },
      // 显示新增
      addShow() {
        this.addVisible = true
        this.addData = {rules:[]}
        this.addSelectValue=0
      },
      //提交新增
      submitAdd(formName) {
        let thi = this
        console.log(thi.addData)
        thi.$refs[formName].validate((valid) => {
          if (valid) {
            thi.addData.rules=thi.addData.rules.join(',')//轉字符串
            thi.mySubmit('addRole', thi.addData).then(function (code) {
              thi.addVisible = false
              thi.getStart()
            })
          } else {
            return false;
          }
        });
      },
      editShow(row) {
        console.log(row)
        this.editData = JSON.parse(JSON.stringify(row)) //获取
        let s=[]
          row.rules.split(',').forEach(value => {
             s.push( parseInt(value))
        })
        this.editData.rules=s
        console.log(this.editData.rules)
        this.editVisible = true
      },

      //提交编辑
      submitEdit(formName) {
        let thi = this
        thi.$refs[formName].validate((valid) => {
          if (valid) {
            thi.editData.id=thi.editData.id
            thi.editData.rules = thi.editData.rules.join(',')
            thi.mySubmit('editRole', thi.editData).then(function (code) {
              if (code == 200) {
                thi.editVisible = false
                thi.getStart()
              }
            })
          } else {
            return false;
          }
        });
      },
      //状态改变提示
      changeMes(id, state) {
        var heeh = '该'
        var caozuo = '禁用'
        if (id.length > 1) {
          heeh = '这些'
        }
        if (state == 0) {
          caozuo = '删除'
        }
        let thi = this
        thi.$confirm('此操作将'+caozuo + heeh+'信息', '是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          thi.submitState(id, state)
        }).catch(() => {
          thi.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //状态改变
      submitState(id, state) {
        let thi = this
        const por = {
          id: id,
          state: state
        }
        thi.mySubmit('delRole', por).then(function (code) {
          if (code == 200) {
            thi.getStart()
          }
        })
      },
      //多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //批量状态改变合并ID
      deletesel() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择要删除的分类!'
          });
          return
        } else {
          var ids = [];
          this.multipleSelection.forEach(function (avalue, aindex, aarr) {
            ids.push(avalue.id)
          });
          this.changeMes(ids, 0)
        }
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getStart()
      },
      //跳转页面
      handleCurrentChange(val) {
        this.currentPage = val
        this.getStart()
      },
    }
  }
</script>

<style scoped>
  .admin-body {
    width: 100%;
  }
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
</style>
